<template>
	<el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">
		<el-descriptions-item width="50%" label='监管单位名称'>
			{{ isNullOrEmpty( formInline?.supUnityName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.supUnityName'>
			{{ isNullOrEmpty( formInline?.supUnityName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.projectName'>
			{{ isNullOrEmpty( formInline?.projectName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" label='授权权限'>
			<span v-for="item in formInline?.roleNames" :key="item" class="mr-[10px]">{{ isNullOrEmpty( item.roleName ) }}</span>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.city'>
			{{ isNullOrEmpty( formInline?.city ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.contactName'>
			{{ isNullOrEmpty( formInline?.contactName ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.contactPhone'>
			{{ isNullOrEmpty( formInline?.contactPhone ) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.updatedAt'>
			{{ isNullOrEmpty( formInline?.updatedAt == null ? '--' : formInline?.updatedAt ) }}
		</el-descriptions-item>
	 </el-descriptions>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import projectopsSelect from "@/components/select/projectopsSelect/projectopsSelect.vue";
import getroleSelect from "@/components/select/getroleSelect/getroleSelect.vue";
import superviseUnitySelect from "@/components/select/superviseUnitySelect/superviseUnitySelect.vue";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/manage/regulatory-authorities/regulatory-authorities/index";
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType;
	isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({}) as infoType,
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: "blur" }],
	supUnityName: [
		{ required: true, message: prompt?.supUnityName, trigger: "blur" }
	],
	unityName: [{ required: true, message: prompt?.unityName, trigger: "blur" }],
	projectName: [
		{ required: true, message: prompt?.projectName, trigger: "blur" }
	],
	city: [{ required: true, message: prompt?.city, trigger: "blur" }],
	contactName: [
		{ required: true, message: prompt?.contactName, trigger: "blur" }
	],
	contactPhone: [
		{ required: true, message: prompt?.contactPhone, trigger: "blur" }
	],
	updatedAt: [{ required: true, message: prompt?.updatedAt, trigger: "blur" }]
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>